<template>
  <div>
    <section class="section1" style="background-image:url(static/images/background.jpg)">
      <div class="section1-title"><h2><img src="static/images/logo.svg" />启辕汽车连锁商城管理系统-车源实时库存信息</h2></div>
      <div class="box-column">
        <div class="box-row">
          <div class="section1-map">
            <iframe src="https://erp.anpxd.com/sale/src/map2.html?market=1" class="map-firame"></iframe>
            <!-- <china-map :params="res.getMarketStorageInfo"></china-map> -->
          </div>
          <div class="section1-data">
            <div class="box-column">
              <div class="section1-title2">
                <dl>
                  <dt>库存量</dt>
                  <dd>{{res.getOutline.carStock | storageNum }}<small> 辆</small></dd>
                </dl>
                <dl>
                  <dt>平台总商户</dt>
                  <dd>{{res.getOutline.shopNum | storageNum }}<small> 户</small></dd>
                </dl>
                <dl>
                  <dt>今日入库量</dt>
                  <dd>{{res.getOutline.todayStorageInfo.storageNum | storageNum }}<small> 辆</small></dd>
                </dl>
                <dl>
                  <dt>今日出库量</dt>
                  <dd>{{res.getOutline.todayOutStorageInfo.storageNum | storageNum }}<small> 辆</small></dd>
                </dl>

                <dl>
                  <dt>本月入库量</dt>
                  <dd>{{res.getOutline.thisMonthStorageInfo.storageNum | storageNum }}<small> 辆</small></dd>
                </dl>
                <dl>
                  <dt>本月出库量</dt>
                  <dd>{{res.getOutline.thisMonthOutStorageInfo.storageNum | storageNum }}<small> 辆</small></dd>
                </dl>
              </div>
              <div class="box-row">
                <div class="box-column">
                  <div class="section1-enter">
                    <div class="box-scroll-auto">
                      <h5>实时入库数据</h5>
                      <table>
                        <tr>
                          <th>时间</th>
                          <th>品牌车系</th>
                          <th>市场名称</th>
                          <th>售价</th>
                        </tr>
                        <tr v-for="item in res.getCarList">
                          <td>{{item.carCreateTime | handleDate}}</td>
                          <td>{{`${item.brand.brandName} ${item.series.seriesName}`}}</td>
                          <td>{{item.market.marketShortName}}</td>
                          <td>{{item.carRetailPrice ? `${item.carRetailPrice} 万元` : '面议'}}</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                  <div class="section1-enter section1-outof">
                    <div class="box-scroll-auto">
                      <h5>实时出库数据</h5>
                      <table>
                        <tr>
                          <th>时间</th>
                          <th>品牌车系</th>
                          <th>市场名称</th>
                          <th>售价</th>
                        </tr>
                        <tr v-for="item in res.getCarSaleList">
                          <td>{{item.carCreateTime | handleDate}}</td>
                          <td>{{`${item.brand.brandName} ${item.series.seriesName}`}}</td>
                          <td>{{item.market.marketShortName}}</td>
                          <td>{{item.carRetailPrice ? `${item.carRetailPrice} 万元` : '面议'}}</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
                <div class="section1-visualization">
                  <car10 :params="res.getMarketStorageOutAndIn"></car10>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box-row">
          <div class="box-row">
            <div class="section1-contrast">
              <car20 :params="res.getDayStorageOutAndIn" :box="{width: '100%;', height: '300px;'}"></car20>
            </div>
            <div class="section1-trend">
              <car30 :params="res.getDaySaleInfo"></car30>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import car10 from './carStockStart10'
import car20 from './carStockStart20'
import car30 from './carStockStart30'
import chinaMap from './chinaMap'
import func from '@/assets/js/func.js'

export default {
  components:{
    car10, car20, car30, chinaMap
  },
  data () {
    return {
      res: {
        getMarketStorageInfo:[],
        getOutline: {
          totalStorageInfo: {},
          todayStorageInfo: {},
          todayOutStorageInfo: {},
          shopNum: {},
          thisMonthOutStorageInfo: {},
          thisMonthStorageInfo: {}
        },
        getCarList: [],
        getCarSaleList: [],
        getMarketStorageOutAndIn: {},
        getDayStorageOutAndIn: {},
        getDaySaleInfo: {}
      }
    }
  },
  created () {
    this.getAll();
  },
  computed: {
    lastData () {
      return func.handleDate('yyyy-MM-dd HH:mm:ss', new Date())
    }
  },
  filters: {
    handleDate (value) {
      return func.handleDate('MM.dd HH:mm:ss', value)
    },
    storageNum (value) {
      return ~~value > 10000 ? 10000 : ~~value
    }
  },
  methods: {
    getQueryAll: function* () {
      // 全国地图 包含经纬度
      yield this.$axios.get('/controller/public/tvStatis/getMarketStorageInfo', {params:{marketId:1}})
      // 标题
      yield this.$axios.get('/controller/public/tvStatis/getOutline', {params: {marketId: 1}})
      // 入库车辆列表
      yield this.$axios.get('/controller/public/tvStatis/getCarList', {params: {marketId: 1}})
      // 出库车辆列表
      yield this.$axios.get('/controller/public/tvStatis/getCarSaleList', {params: {marketId: 1}})
      // 市场出入库信息
      yield this.$axios.get('/controller/public/tvStatis/getMarketStorageOutAndIn', {params: {marketId: 1}})
      // 每日出入库信息
      yield this.$axios.get('/controller/public/tvStatis/getDayStorageOutAndIn', {params: {marketId: 1}})
      // 每日销售额信息
      yield this.$axios.get('/controller/public/tvStatis/getDaySaleInfo', {params: {marketId: 1}})
      // 结束
      return false
    },
    getAll () {
      let getQueryFn = this.getQueryAll()
      this.$axios.all([
        getQueryFn.next()['value'],
        getQueryFn.next()['value'],
        getQueryFn.next()['value'],
        getQueryFn.next()['value'],
        getQueryFn.next()['value'],
        getQueryFn.next()['value'],
        getQueryFn.next()['value']
      ]).then(this.$axios.spread((prems1, prems2, prems3, prems4, prems5, prems6, prems7) => {
        [
          this.res.getMarketStorageInfo,
          this.res.getOutline,
          this.res.getCarList,
          this.res.getCarSaleList,
          this.res.getMarketStorageOutAndIn,
          this.res.getDayStorageOutAndIn,
          this.res.getDaySaleInfo
        ] = [
          prems1.data.result,
          prems2.data.result,
          prems3.data.result,
          prems4.data.result,
          prems5.data.result,
          prems6.data.result,
          prems7.data.result
        ]
      }))
      setTimeout(() => {
        this.getAll()
      }, func.forwardDate().length * 1000)
    }
  }
}
</script>
<style scoped>
  body,html { zoom: 0.6666;}
</style>

